/*
用户注册的路由组件
*/
import React, {Component} from 'react'
import {NavBar,
    WingBlank,
    List,
    InputItem,
    WhiteSpace,
    Radio,
    Button,
    Icon} from 'antd-mobile'
import Logo from "../../components/logo/Logo";
import './radio.less'
import {connect} from 'react-redux'
import {register} from '../../redux/actions'
import '../../assets/index.css'


const Item = List.Item
class Register extends Component {
    state = {
        username: '',  // 用户名
        password: '',  // 密码
        password2: '',  // 确认密码
        type: 'laoban',  // 用户类型名称   dashen/laoban  默认老板
    }
    // 处理输入数据的改变: 更新对应的状态
    handleChange=(name,val)=>{
        // 更新状态
        this.setState({
            [name]:val  // 属性名不是name, 而是name变量的值
        })

    }
    // 点击注册调用
    register = () => {
        //console.log(this.state)
        this.props.register(this.state)
    }
    toLogin=()=>{
        // this.props.history.replace跳转到登录界面 (不需要再回退回到注册所以用replace)
        this.props.history.push('/login')
    }
    onReset = () => {


        this.setState({
            username: '',  // 用户名
            password: '',  // 密码
            password2: '',  // 确认密码
            type: 'laoban',  // 用户类型名称   dashen/laoban  默认老板
        })
    }
    render() {
        let {username,password,password2,type,} = this.state
        const {msg} = this.props.user
        return (
            <div>
                <NavBar
                    mode="dark"
                    icon={<Icon type="left" />}
                    onLeftClick={() => console.log('onLeftClick')}
                    rightContent={[
                        <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
                        <Icon key="1" type="ellipsis" />,
                    ]}
                >硅谷直聘</NavBar>
                <Logo/>
                <WingBlank>
                    <List>
                        {/*前端和后端返回错误信息要显示*/}
                        {msg ? <div className='error-msg'>{msg}</div> : null}
                        <WhiteSpace/>
                        {/*onChange方法中val是自动收集上来的输入框数据*/}
                        <InputItem placeholder="please input account" value={username} onChange={(val)=>{this.handleChange('username',val)}}>用户名:</InputItem>
                        <WhiteSpace/>
                        <InputItem  placeholder="please input password" value={password} type="password"  onChange={(val)=>{this.handleChange('password',val)}}>密&nbsp;&nbsp;&nbsp;码:</InputItem>
                        <WhiteSpace/>
                        <WhiteSpace/>
                        <InputItem placeholder='请输入确认密码' value={password2} type="password"  onChange={val => {this.handleChange('password2', val)}}>确认密码:</InputItem>
                        <WhiteSpace/>
                        <Item>
                            <span>用户类型:</span>&nbsp;&nbsp;
                            <Radio className="my-radio" checked={type==='dashen'} onChange={()=>{this.handleChange("type",'dashen')}}>大神</Radio>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <Radio className="my-radio" checked={type==='laoban'} onChange={()=>{this.handleChange("type",'laoban')}}>老板</Radio>
                        </Item>

                        <Item>
                            <Button size="small" inline style={{ marginLeft: '2.5px' }} onClick={this.onReset}>重置</Button>
                            <Button type="primary"  onClick={this.register}>注&nbsp;&nbsp;&nbsp;册</Button>
                            <WhiteSpace/>
                            <Button onClick={this.toLogin}>已有账户</Button>
                        </Item>
                    </List>
                </WingBlank>
            </div>
        )

    }
}

export default connect(
    (state)=>({user:state.user111}),   //user111是 reducer里的函数
    {register}
)(Register)